<template>
    <div class="wrap ">

            <div class="aside">
             <Aside/>
            </div>

            <div class="container">
                <div class="header">
                    <Head/>
                </div>
                <div class="main">
                    <router-view></router-view>
                </div>
                <div class="footer">底部</div>
            </div>

    </div>
</template>

<script>
    import Aside from "../components/Aside.vue"
    import Head from "../components/Head.vue"
    export default {
        data() {
            return {

            }
        },
        created() {},

        components: {
            Aside,Head
        }
    }
</script>
<style scoped>
   .wrap{
     /* max-width: 1190px; */
     max-width: calc (100vw - 60px);
     height: 100vh;
     display: flex;
     flex-direction: row;
     

  }
   .aside{
      height: 100vh;

   }
   .container{
     height: 100vh;
     flex:1;
     max-width: calc(100% - 60px);
     /* flex-shrink: 1; */
     display: flex;
     flex-direction: column;
     background-color: #ddd;
   }
   .header{
     height: 60px;
   }
   .main{
     flex: 1;
     margin:10px;
     border-radius: 10px;
     /* background-color: #fff; */
     overflow: scroll;
     /* max-height: calc(100vh - 120px); */
     text-align: center;

   }
   .footer{
     height: 60px;
     background-color: black;
     color:white;
   }



</style>